.banner {
  image {
    width: 100%;
    height: 400rpx;
  }
}

.about {
  width: 100%;
  padding: 20rpx 30rpx;
  display: flex;
  flex-direction: column;

  .en {
    font-size: var(--bigSize);
    color: var(--greyColor);
    padding: 10rpx 0;
  }

  .cn {
    font-size: var(--maxSize);
    color: var(--themeColor);
    font-weight: 550;
    padding: 10rpx 0;
  }
}

.contact {
  width: 100%;
  height: 280rpx;
  padding: 20rpx 30rpx;
  display: flex;
  flex-direction: row;
  align-items: center;

  .text {
    width: 60%;

    text {
      display: block;
    }

    .title {
      font-size: var(--bigSize);
    }

    .des {
      margin-top: 40rpx;
      font-size: var(--minSize);
    }

  }

  .qrImg {
    width: 40%;
    display: flex;
    flex-direction: column;
    align-items: center;

    .img {
      height: 150rpx;
      width: 150rpx;
      border: 1rpx solid var(--greyColor);
      line-height: 150rpx;

      image {
        height: 100%;
        width: 100%;
      }
    }

    .des {
      font-size: var(--minSize);
      margin-top: 10rpx;
    }
  }
}

scroll-view {
  white-space: nowrap;
  flex-direction: row-reverse;
  padding: 20rpx 0;

  .item {
    height: 180rpx;
    width: 180rpx;
    display: inline-flex;
    flex-direction: column;
    align-items: center;

    .img {
      width: 120rpx;
      height: 120rpx;

      image {
        width: 100%;
        height: 100%;
      }
    }

    .text {
      font-size: var(--bigSize);
      color: var(--themeColor2);
    }

  }
}

.recommend{
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 30rpx 30rpx;
  background-color: var(--defaultBgc);

  .cate{
    display: flex;
    flex-direction: column;
    width: 100%;
    margin-top: 30rpx;
    .title{
      .en{
          font-size: var(--bigSize);
          color:var(--greyColor);
      }
      .cn{
        font-size: var(--bigSize);
        font-weight: 600;
        color:var(--themeColor);
      }
    }

    .goods{
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      width: 100%;
      margin-top: 20rpx;

      .goods-item{
        width: 32%;
        display: flex;
        flex-direction: column;
        background-color: var(--frontColor);

        .img{
          width: 100%;
          height: 200rpx;
          image{
            width: 100%;
            height: 100%;
          }
        }
        .name{
          margin-top: 10rpx;
          font-size: var(--littleSize);
          text-align: center;
          height: 50rpx;
          text{
            line-height:50rpx;
          }
        }

        .info{
          margin-top: 10rpx;
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          
          .price{
            font-size: var(--minSize);
            color: var(--themeColor2);
          }
          .icon{
            font-size: var(--minSize);
            color: var(--themeColor2);
          }
        }





      }

    }
    
  }
}